<template>
	<view class="select-screen">
		<input placeholder="输入店铺地理位置" border="surround" id="tipinput" clearable v-model="searchPlaceInput" prefixIcon="search"></input>
		
		<button type="primary" class="uni-button" @click="clickSearch" >
			搜索
		</button>
	</view>
	<div class="box">
		<div id="my-panel" class="my-panel" @markerClick="clickMarker"></div>
		<div id="container"></div>
	</div>
</template>

<script>
	window._AMapSecurityConfig = {
		securityJsCode: "b50032c47c635addc5f5a8748943db92"
	}
	import AMapLoader from '@amap/amap-jsapi-loader';
	const SHOP = uni.getStorageSync("shop-Store-Cache")
	export default {
		name: "MapContainer",
		props:{
			location:{
				type:Object
			}
		},
		data() {
			return {
				city: "371700",
				map: null,
				auto: null,
				placeSearch: null,
				searchPlaceInput: '',
			}
		},
		mounted() {
			console.log(123)
			AMapLoader.load({
				key: "1e42fdb1c81e3b9778da99821ec5f242", // 申请好的Web端开发者Key，首次调用 load 时必填
				version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
				plugins: [
					"AMap.AutoComplete,AMap.PlaceSearch,AMap.Icon,AMap.Marker"
				], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
			}).then((AMap) => {
				this.map = new AMap.Map("container", {
					// 设置地图容器id
					viewMode: "3D", // 是否为3D地图模式
					pitch: 60,
					zoom: 17, // 初始化地图级别
					center: this.location, // 初始化地图中心点位置
					resizeEnable: true,
				});
				const icon = new AMap.Icon({
				  size: new AMap.Size(25, 34), //图标尺寸
				  image:  "https://wimg.588ku.com/gif620/20/03/25/09dad74bdb1b835b70bbfb39d4f8c07c.gif", //Icon 的图像
				  imageSize: new AMap.Size(35,35), //根据所设置的大小拉伸或压缩图片
				});
				const marker = new AMap.Marker({
				  position: this.location,
				  icon:icon,
				  title: "位置",
				});
				this.map.add(marker)
				
				this.auto = new AMap.AutoComplete({
					city:this.city,
					input: 'tipinput'
				})
				this.auto.on("select", this.selectAuto)
				this.placeSearch = new AMap.PlaceSearch({
					pageSize: 4, //单页显示结果条数
					city: this.city, //兴趣点城市
					map: this.map, //展现结果的地图实例
					panel: "my-panel", //结果列表将在此容器中进行展示。
					autoFitView: false, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
				});
				
				this.placeSearch.on("selectChanged",this.clickMarker)
			})
		},
		methods: {
			selectAuto(e) {
				this.placeSearch.setCity(e.poi.adcode);
				this.placeSearch.search(e.poi.name); //关键字查询查询
			},
			clickMarker(event) {
				let data = event.selected.data
				const form = {
					location:{
						coordinates:[data.location.lng,data.location.lat],
						type: "Point"
					},
					address:data.pname+data.cityname+data.adname+data.address,
					poiname:data.name
				}
				this.$emit("markers",form)
			},
			clickSearch() {
				if (this.searchPlaceInput) {
					this.placeSearch.searchNearBy(this.searchPlaceInput,SHOP.location.coordinates,3300,function (){})
				}
			}
		},
		created() {},
		watch: {
			"searchPlaceInput"(val) {
				if (val) {
					this.auto.search(this.searchPlaceInput, function(status, result) {
					})
				}
			}
		}
	}
</script>

<style scoped>
	#tipinput{
		width:70%;
		border:1px solid #eee;
		padding:5px;
		border-radius: 5px;
		position: relative;
	}
	.box {
		position: relative;
	}
	.my-panel {
		width: 290px;
		position: absolute;
		z-index: 99;
		right:5px;
		top:10%;
		box-shadow: 0 1px 10px 0 #eee;
	}
	.select-date {
		width: 310px;
		padding: 10px;
	}
	.select-screen {
		display: flex;
		padding: 15px 0px;
		height: 30px;
		column-gap: 10px;
	}
	#container {
		position: relative;
		width:70%;
		height:300px;
	}
</style>